<template>
  <view class="realName">
    <!-- 页面标题 -->
    <classifyHead title="实名认证" />

    <!-- 主内容区域 -->
    <view class="content" v-if="!isCertified">
      <view class="name">您还未实名认证!</view>
      <button class="btn" @click="showAuthModal = true">去认证</button>
    </view>

    <!-- 已认证状态 -->
    <view class="content" v-else>
      <view class="name">您已实名认证</view>
      <view class="name" style="font-size: 32rpx; margin-top: 30rpx;">{{maskedName}}</view>
      <view class="name" style="font-size: 32rpx; margin-top: 20rpx;">{{ maskedIdCard  }}</view>
    </view>

    <!-- 实名认证弹窗 -->
    <view class="modal-overlay" v-if="showAuthModal" @click="closeModal">
      <view class="modal-content" @click.stop>
        <view class="modal-title">实名认证</view>

        <!-- 姓名 -->
        <view class="input-group">
          <text class="label">真实姓名：</text>
          <input
            type="text"
            placeholder="请输入真实姓名"
            v-model="form.name"
            class="input-field"
            placeholder-style="color: #ccc; font-size: 14px;"
          />
        </view>

        <!-- 身份证 -->
        <view class="input-group">
          <text class="label">身份证号：</text>
          <input
            type="text"
            placeholder="请输入身份证号"
            v-model="form.idCard"
            class="input-field"
            placeholder-style="color: #ccc; font-size: 14px;"
          />
        </view>

        <!-- 按钮组 -->
        <view class="btn-group">
          <button class="btn-cancel" @click="closeModal">取消</button>
          <button class="btn-confirm" @click="submitAuth">确定</button>
        </view>
      </view>
    </view>

    <!-- 成功/失败提示框 -->
    <view v-if="showToast" class="toast-overlay">
      <view class="toast-box">
        <image class="toast-icon" :src="toastIcon" mode="aspectFit" />
        <text class="toast-text">{{ toastText }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref,computed,onMounted } from 'vue';
import classifyHead from '@/components/classifyHead.vue';
import {apiRealNameAccountInfo,apiRealNameVerification} from '@/api/myScore';
// 是否已认证,默认没有认证
const isCertified = ref(false);
// 弹窗控制
const showAuthModal = ref(false);
onMounted(async () => {
 // 获取页面参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const { from } = currentPage.options; // 获取 url 参数
  if(from === 'realName'){
//挂载载时获取实名认证信息
    const res = await apiRealNameAccountInfo({});
  console.log('获取实名认证信息成功:', res);
    if (res.code === 200) {
      // 已认证账户
      isCertified.value = true;

    } else if (res.code === 201) {
      // 未绑定账户
      isExistAccount.value = false;
    } 
  }

});


// 表单数据
const form = ref({
  name: '',
  idCard: ''
});


// 提示框状态
const showToast = ref(false);
const toastType = ref('success'); // 'success' | 'fail'
const toastText = ref('认证成功！');
const toastIcon = ref('../../static/OkIcon.png');

// 打开弹窗（可重认证）
const reCertify = () => {
  form.value.name = '';
  form.value.idCard = '';
  showAuthModal.value = true;
};

// 关闭弹窗
const closeModal = () => {
  showAuthModal.value = false;
  // 可选：关闭时不清空表单，保留输入
};

// 提交认证
const submitAuth =async () => {
  const { name, idCard } = form.value;

  if (!name.trim()) {
    uni.showToast({ title: '请输入真实姓名', icon: 'none' });
    return;
  }

  if (!idCard.trim()) {
    uni.showToast({ title: '请输入身份证号', icon: 'none' });
    return;
  }

  const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}(\d|X|x)$/;
  if (!idCardRegex.test(idCard)) {
    uni.showToast({ title: '身份证号格式不正确', icon: 'none' });
    return;
  }
  // 模拟提交成功
  console.log('认证信息:', form.value);
  const realNameRes = await apiRealNameVerification({
   realName:form.value.name,
   idCardNumber:form.value.idCard
  });
  if(realNameRes.code === 200){
  // 设置为已认证
  isCertified.value = true;

  // 显示成功提示
  toastType.value = 'success';
  toastText.value = '认证成功！';
  toastIcon.value = '../../static/OkIcon.png';
  showToast.value = true;

  // 1.5秒后隐藏提示
  setTimeout(() => {
    showToast.value = false;
    showAuthModal.value = false;
  }, 1500);
};
}
// 脱敏后的身份证号（用于显示）
const maskedIdCard = computed(() => {
  const id = form.value.idCard;
  if (!id || id.length !== 18) return id; // 如果未填写或格式不对，原样返回
  return id.slice(0, 3) + '********' + id.slice(-4);
});
// 脱敏后的姓名
const maskedName = computed(() => {
  const name = form.value.name?.trim();
  if (!name || name.length < 2) return name; // 少于2个字不隐藏

  // 只保留第一个和最后一个字，中间用 * 替代
  return name.charAt(0) + '*'.repeat(name.length - 2) + name.charAt(name.length - 1);
});
</script>

<style lang="scss" scoped>
.realName {
  min-height: 100vh;
  background-color: #f8f8f8;
  position: relative;
}

.content {
  width: calc(100% - 80rpx);
  height: 350rpx;
  margin: 20rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
  border-radius: 30rpx;
  padding-top: 20rpx;
  background-color: #fff;
  text-align: center;
}

.name {
  margin-top: 65rpx;
  font-size: 50rpx;
  width: 100%;
}

.btn {
  width: 240rpx;
  height: 90rpx;
  background: #5756b3;
  color: #fff;
  border-radius: 45rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30rpx auto 0;
  font-size: 32rpx;
}

/* 弹窗遮罩 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  width: 80%;
  max-width: 360px;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 40rpx;
}

.input-group {
  margin-bottom: 40rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  text-align: left;
  margin-bottom: 16rpx;
}

.input-field {
  width: 92%;
  padding: 20rpx;
  border: 1px solid #ddd;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #f9f9f9;
  text-align: left;
}

.btn-group {
  display: flex;
  gap: 30rpx;
  justify-content: center;
}

.btn-cancel {
  padding: 20rpx 40rpx;
  border: 1px solid #ccc;
  border-radius: 40rpx;
  background-color: #fff;
  color: #666;
  font-size: 28rpx;
  width: 200rpx;
}

.btn-cancel::after {
  border: none;
}

.btn-confirm {
  padding: 20rpx 40rpx;
  border: none;
  border-radius: 40rpx;
  background-color: #5756b3;
  color: #fff;
  font-size: 28rpx;
  width: 200rpx;
}

.btn-confirm::after {
  border: none;
}

/* 统一提示框 */
.toast-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.toast-box {
  width: 400rpx;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.toast-icon {
  width: 70rpx;
  height: 70rpx;
  margin-bottom: 20rpx;
}

.toast-text {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}
</style>